<template>
    <div class="box_alarm">
        <MoodalTitle :title="'市民爆料热点问题词云图'" />
        <!-- 云标签 -->
        <div id="wordCloud" class="boxWord"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import { ZhShianalysis } from '@/api/zhangzi'
import 'echarts-wordcloud';
export default {
    components: { MoodalTitle },
    data() {
        return {
            userList: [
                {
                    name: '待处理',
                    color: '#E53935',
                },
                {
                    name: '处理中',
                    color: '#FF7043',
                },
                {
                    name: '已超期',
                    color: '#FFA726',
                },
            ],
            routeLink: '',
            echartsData: [],
            
                // { value: '12', name: '361' },
            //     { value: '11', name: '摩托罗拉' },
            //     { value: '10', name: '联想' },
            //     { value: '9', name: '玩家国度' },
        }
    },
    mounted() {
        this.CitizensData()
    },
    methods: {
        // 市民爆料热点问题词云图
        CitizensData() {
            ZhShianalysis.hotWordAPI().then(res => {
                console.log(res, '市民爆料热点问题词云图');
                if(res.code == 200){
                    res.data.forEach(item => {
                        this.echartsData.push({value:item.value,name:item.keywords})
                    })
                }
                this.initChart()

            })
        },
        initChart() {
            const colorList = ['#24DCF7']
            var myChart = echarts.init(document.getElementById('wordCloud'));
            const option = {
                title: {
                    text: '',
                    x: "center"
                },
                // backgroundColor: "#fff",
                // tooltip: {
                //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
                // },
                series: [
                    {
                        type: "wordCloud",
                        //用来调整词之间的距离
                        gridSize: 15,
                        //用来调整字的大小范围
                        // Text size range which the value in data will be mapped to.
                        // Default to have minimum 1.2rem and maximum 6rem size.
                        sizeRange: [14, 40],
                        // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                        //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                        // rotationRange: [-45, 0, 45, 90],
                        // rotationRange: [ 0,90],
                        rotationRange: [0, 0],
                        //随机生成字体颜色
                        // maskImage: maskImage,
                        textStyle: {
                            normal: {
                                color: colorList
                            }
                        },
                        //位置相关设置
                        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                        // Default to be put in the center and has 75% x 80% size.
                        left: "center",
                        top: "center",
                        right: null,
                        bottom: null,
                        width: "100%",
                        height: "100%",
                        //数据
                        data: this.echartsData
                    }
                ]
            };
            myChart.setOption(option);
            // 点击某个字
            // myChart.on('click', function (params) {
            //     console.log('myChart----click---:', params, '------', params.data)
            // });
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    position: relative;
    width: 60.7rem;
    height: 22rem !important;
    margin-bottom: 1.9rem;
    overflow: hidden;
}

.sign {
    width: 15.2rem;
    background: url('../../../../assets/images/zhangzi/home/chili-bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 2rem 1.6rem;
    position: absolute;
    bottom: 3rem;
    right: 52rem;
    z-index: 900;

    ul {
        width: 100%;
        margin: 0;

        li {
            display: flex;
            align-items: center;
            margin-bottom: 1.6rem;

            &:last-child {
                margin: 0;
            }

            img {
                width: 2.3rem;
                height:  3.2rem;
            }

            span {
                display: inline-block;
                margin-left: 1.6rem;
                font-size: 2.2rem;
                font-family: Adobe Heiti Std;
                color: #FFFFFF;
            }
        }
    }
}

.boxWord {
    padding-top: 1.5rem;
    width: 50rem;
    height: 16.9rem;
    position: absolute;
    left: 2.3rem;
    // top: 1px;
    width: 41.8rem;
    height: 13.2rem;
}
</style>